<template>
  <!-- 文件管理 -->
  <div id="projectContract">
    <div class="search">
      <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
        <el-form-item label="文件名：">
          <el-input
            v-model="searchFrom.wjmc"
            placeholder="请输入文件名称"
            style="width: 13.9286rem"
          ></el-input>
        </el-form-item>
        <el-form-item label="提交日期：">
          <el-date-picker
            v-model="searchFrom.crsjdate"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="文件类型：">
          <!-- <el-input
            v-model="searchFrom.wjlx"
            placeholder="请输入文件名称"
            style="width: 13.9286rem"
          ></el-input> -->
          <el-select
              v-model="searchFrom.wjlx"
              placeholder="请选择"
              style="width: 13.9286rem"
            >
              <el-option label="论证报告" value="0"> </el-option>
              <el-option label="招/投标书" value="1"> </el-option>
              <el-option label="研制总要求" value="2"> </el-option>
              <el-option label="任务书" value="3"> </el-option>
              <el-option label="风险分析报告" value="4"> </el-option>
              <el-option label="质量保证大纲" value="5"> </el-option>
              <el-option label="方案设计报告" value="6"> </el-option>
              <el-option label="工艺方案报告" value="7"> </el-option>
              <el-option label="地面试验报告" value="8"> </el-option>
              <el-option label="飞行试验报告" value="9"> </el-option>
              <el-option label="工作总结报告" value="10"> </el-option>
              <el-option label="技术成熟度评价报告" value="11"> </el-option>
              <el-option label="归零报告" value="12"> </el-option>
            </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 0.7143rem">
          <el-button class="generalButton" icon="el-icon-search"
            @click="searchRes">查询</el-button
          >
          <el-button class="generalButton" icon="el-icon-refresh-right" @click="reset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div>
        <el-button class="generalButton" icon="el-icon-plus" @click="addfileGl">新增</el-button>
      </div>
    </div>
    <div class="table">
      <el-alert style="background: #e6f7ff" :closable="false">
        <span style="color: #64736c">已选择</span>
        <span style="color: #519df8">{{ selectData.length }}</span>
        <span style="padding-right: 1.3571rem; color: #64736c">项</span>
        <span style="color: #519df8; cursor: pointer" @click="clear()"
          >清空</span
        >
      </el-alert>
      <el-table
        ref="multipleTable"
        :data="tableData"
        v-loading="loading"
        border
        :cell-style="cellStyle"
        highlight-current-row
        :header-cell-style="{
          background: '#2B69A6',
          color: '#fff',
          borderColor: '#BDE1FC',
        }"
        tooltip-effect="dark"
        style="width: 100%; margin-top: 0.8571rem"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column label="序号" type="index" width="80" align="center">
        </el-table-column>
        <el-table-column prop="wjmc" label="文件名" align="center">
        </el-table-column>
        <el-table-column prop="gcmc" label="所属计划" align="center">
        </el-table-column>
        <el-table-column prop="lcb" label="里程碑" align="center">
          <template slot-scope="scope">
            {{lichengbeiType(scope.row.lcb)}}
          </template>
        </el-table-column>
        <el-table-column prop="zedw" label="责任单位" align="center">
        </el-table-column>
        <el-table-column prop="wjlx" label="文件类型" align="center">
          <template slot-scope="scope">
            {{wenjianType(scope.row.wjlx)}}
          </template>
        </el-table-column>
        <el-table-column prop="crsj" label="提交时间" align="center">
        </el-table-column>
        <el-table-column prop="bz1" label="备注" align="center">
        </el-table-column>
        <!-- <el-table-column prop="data" label="签约日期" align="center">
        </el-table-column>
        <el-table-column prop="belongs" label="所属课题" align="center">
        </el-table-column> -->
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" style="padding-right: 0.5rem" @click="editFile(scope.row)"
              >编辑</el-button
            >
            <el-popover placement="bottom" trigger="click">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                "
              >
                <!-- <el-button type="text" style="color: #000">查看详情</el-button> -->
                <el-button
                  type="text"
                  style="color: #000"
                  @click="downManagement(scope.row)"
                  >下载附件</el-button
                >
                <el-button type="text" style="color: #000" @click="deletefiles(scope.row)">删除</el-button>
              </div>
              <el-button type="text" slot="reference"
                >更多<i class="el-icon-arrow-down el-icon--right"></i
              ></el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.totalCount"
      >
      </el-pagination>
    </div>
    <!-- 新增/编辑 文件 -->
    <el-dialog
      :visible.sync="addfileglDialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div slot="title" class="title">
        <div><span>{{title}}</span></div>
        <div>
          <i
            class="el-icon-close"
            @click="addfileglDialogVisible = false"
          ></i>
        </div>
      </div>
      <div class="content">
        <el-form
          ref="addfileform"
          :model="addfileform"
          label-width="120px"
          class="demo-ruleForm"
          :rules="rules"
        >
          <el-form-item label="文件名：" prop="wjmc">
            <el-input
              v-model.trim="addfileform.wjmc"
              placeholder="请输入文件名"
              :rows="3"
            ></el-input>
          </el-form-item>
          <el-form-item label="提交时间：" prop="crsj">
            <el-date-picker
              v-model="addfileform.crsj"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="合同金额：">
            <el-input
              type="textarea"
              v-model="addplatform.gzdw"
              placeholder="请输入合同金额"
              :rows="3"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="所属计划：" prop="gcxxjhbid">
            <el-select
              v-model="addfileform.gcxxjhbid"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="item in subplan" :key="item.id" :label="item.gcmc" :value="item.id"></el-option>
              <!-- <el-option label="否" value="1"> </el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="里程碑：" prop="lcb">
            <el-select
              v-model="addfileform.lcb"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="论证阶段" value="1"> </el-option>
              <el-option label="方案阶段" value="2"> </el-option>
              <el-option label="工程研制阶段（初样、试/正样）" value="3"> </el-option>
              <el-option label="设计定性阶段" value="4"> </el-option>
              <el-option label="生产定型阶段" value="5"> </el-option>
              <el-option label="批生产阶段" value="6"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="责任单位：" prop="zedw">
            <el-input
              v-model="addfileform.zedw"
              placeholder="请输入"
              :rows="3"
            ></el-input>
          </el-form-item>
          <el-form-item label="文件类型：" prop="wjlx">
            <el-select
              v-model="addfileform.wjlx"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="论证报告" value="0"> </el-option>
              <el-option label="招/投标书" value="1"> </el-option>
              <el-option label="研制总要求" value="2"> </el-option>
              <el-option label="任务书" value="3"> </el-option>
              <el-option label="风险分析报告" value="4"> </el-option>
              <el-option label="质量保证大纲" value="5"> </el-option>
              <el-option label="方案设计报告" value="6"> </el-option>
              <el-option label="工艺方案报告" value="7"> </el-option>
              <el-option label="地面试验报告" value="8"> </el-option>
              <el-option label="飞行试验报告" value="9"> </el-option>
              <el-option label="工作总结报告" value="10"> </el-option>
              <el-option label="技术成熟度评价报告" value="11"> </el-option>
              <el-option label="归零报告" value="12"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注：" prop="bz1">
            <el-input
              type="textarea"
              v-model="addfileform.bz1"
              placeholder="请输入"
              :rows="3"
            ></el-input>
          </el-form-item>
          <el-form-item label="附件：">
            <el-upload
                  class="upload-demo"
                  action=""
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                  :http-request="httpRequest"
                  :auto-upload="false"
                  ref="upload"
                  style="display:inline-block"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <!-- <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div> -->
                </el-upload>
          </el-form-item>
          <!-- <el-form-item label="附件："></el-form-item> -->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="contentButton">
          <el-button @click="quexiao">取消</el-button>
          <el-button  class="generalButton" @click="addfiles">确定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getFilelist, editFilelist, addFilelist, getsubplan, searchwjgl } from "@/api/gcxinxigl.js"
import { Uploadfujian, downfile } from "api/jscsdpg";
export default {
  components: {
    // dialogManager,
  },
  data() {
    return {
      title: '',
      flag: '0',
      fileList: [],
      loading: false,
      // 所属计划
      subplan: [],
      // 选中表格多少跳
      selectData: [],
      // 经费管理对话框是否显示
      isDialog: false,
      // 新增文件管理对话框
      addfileglDialogVisible: false,
      addfileform: {
        cjr: 'admin',
        gxr: 'admin',
        xlzt: '1'
      },
      // 分页
      pageInfo: {
        currentPage: 1,
        totalCount: 0,
        pageSize: 0,
      },
      // 表单
      searchFrom: {
        crsjdate: []
      },
      // 表格
      tableData: [
        // {
        //   name: "张三",
        //   startTime: "123",
        //   endTime: "456",
        //   ProjectName: "你猜",
        //   work: "良好",
        //   note: "加油",
        //   projectPerpon: "我在",
        //   data: "123",
        //   belongs: "a",
        // },
        // {
        //   name: "张三",
        //   startTime: "123",
        //   endTime: "456",
        //   ProjectName: "你猜",
        //   work: "良好",
        //   note: "加油",
        //   projectPerpon: "我在",
        //   data: "123",
        //   belongs: "a",
        // },
        // {
        //   name: "张三",
        //   startTime: "123",
        //   endTime: "456",
        //   ProjectName: "你猜",
        //   work: "良好",
        //   note: "加油",
        //   projectPerpon: "我在",
        //   data: "123",
        //   belongs: "a",
        // },
      ],
      rules: {
        wjmc: [
          { required: true, message: '请输入文件名', trigger: 'blur' },
          { max: 50, message: '文件名录入不可超过50字', trigger: 'blur' }
        ],
        crsj: [{ required: true, message: '提交时间不能为空', trigger: 'blur' },],
        zedw: [
          { required: true, message: '请输入责任单位', trigger: 'blur' },
          { max: 50, message: '责任单位录入不可超过50字', trigger: 'blur' }
        ],
      },
      id: ''
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      getFilelist(this.pageInfo).then(res => {
        console.log(res)
        this.tableData = res.data
        this.pageInfo = res.pageInfo
        this.loading = false
      }).catch(err => {
        console.log(err)
      })
    },
    // 里程碑
    lichengbeiType(status) {
      const statusObj = {
        1: "论证阶段",
        2: "方案阶段",
        3: "工程研制阶段（初样、试/正样）",
        4: "设计定性阶段",
        5: "生产定型阶段",
        6: "批生产阶段"
      };
      return statusObj[status];
    },
    // 文件类型
    wenjianType(status) {
      const statusObj = {
        0: "论证报告",
        1: "招/投标书",
        2: "研制总要求",
        3: "任务书",
        4: "风险分析报告",
        5: "质量保证大纲",
        6: "方案设计报告",
        7: "工艺方案报告",
        8: "地面试验报告",
        9: "飞行试验报告",
        10: "工作总结报告",
        11: "技术成熟度评价报告",
        12: "归零报告",
      };
      return statusObj[status];
    },
    // 新增文件管理
    addfileGl() {
      this.addfileglDialogVisible = true
      this.title = '新增文件'
      this.flag = '0'
      // 新增文件获取所属计划
      getsubplan().then(res => {
        // console.log(res, '----');
        this.subplan = res.data
      }).catch(err => {
        console.log(err);
      })
    },
    // 编辑文件
    editFile(data) {
      this.addfileglDialogVisible = true
      this.title = '编辑文件'
      this.flag = '1'
      // getsubplan().then(res => {
      //   // console.log(res, '----');
      //   this.subplan = res.data
      // }).catch(err => {
      //   console.log(err);
      // })
      this.addfileform = data
      console.log(this.addfileform);
      
    },
    // 上传附件
    httpRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      Uploadfujian(this.id,'1',fd).then(res=>{
        console.log(res);
      })
    },
    // 新增/编辑 文件
    addfiles() {
      if (this.flag === '1') {
        editFilelist(this.addfileform.id, this.addfileform).then(res => {
          console.log(res);
          this.$message.success('编辑成功！')
          this.addfileglDialogVisible = false
          this.init()
        }).catch(err => {
          console.log(err);
        })
      } else if (this.flag === '0') {
        addFilelist(this.addfileform).then(res => {
          // console.log(res, '=====');
          this.id = res.data.id
          this.$refs.upload.submit()
          this.$message.success('添加成功！')
          // 清空附件列表
          this.$refs.upload.clearFiles()
          this.addfileglDialogVisible = false
          this.$nextTick(function(){
            this.init()
          })
          // this.init()
          this.addfileform = {
            cjr: 'admin',
            gxr: 'admin',
            xlzt: '1'
          }
        }).catch(err => {
          console.log(err);
        })
      }
    },
    // 删除文件
    deletefiles(data) {
      editFilelist(data.id, {xlzt: '0'}).then(res => {
        console.log(res)
        this.$message.success('删除成功！')
        this.init()
      }).catch(err => {
        console.log(err)
      })
    },
    // 取消操作
    quexiao() {
      // debugger
      // this.$refs.addfileform.resetFields()
      this.addfileform = {
            cjr: 'admin',
            gxr: 'admin',
            xlzt: '1'
          }
      this.addfileglDialogVisible = false
    },
    // 查询操作
    searchRes() {
      if (this.searchFrom.crsjdate.length !== 0) {
        // debugger
        this.searchFrom.crsj = this.searchFrom.crsjdate.join('-')
      } else {
        this.searchFrom.crsj = ''
      }
      searchwjgl(this.searchFrom).then(res => {
        // console.log(res, '000000000')
        this.tableData = res.data
        this.pageInfo = res.pageInfo
      }).catch(err => {
        console.log(err)
      })
    },
    // 重置操作
    reset() {
      this.searchFrom = {
        crsjdate: []
      }
    },
    // 清除选中项
    clear() {
      (this.selectData = []), this.$refs.multipleTable.clearSelection();
    },
    // 是否关闭经费管理对话框
    closeDialog() {
      this.isDialog = false;
    },
    // 下载按钮
    downManagement(data) {
      // console.log(data);
      downfile(data.id, 1).then(res => {
        console.log(res, '+++');
        let blob = new Blob([res], {
          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8",
        });
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.setAttribute("download", data.wjmc);
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(link.href);
        document.body.removeChild(link);
      })
    },
    handleSelectionChange(val) {
      this.selectData = val;
    },
    // 更改边框颜色
    cellStyle() {
      return "border-color:#BDE1FC;";
    },
    // 页数总数改变
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      this.init()
    },
    // 当前页数改变
    handleCurrentChange(val) {
      this.pageInfo.currentPage = val
      this.init()
    },
    handlePreview() {},
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    beforeRemove() {},
    handleExceed() {},
  },
};
</script>

<style lang="less" scoped>
#projectContract {
  background: #fff;
  color: #000;
  padding: 1.4286rem;
}
.search {
  padding-bottom: 0.9286rem;
}
.demo-form-inline {
  width: 100%;
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #bde1fc;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #bde1fc;
}
.pagination {
  padding-top: 0.7143rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.title {
  color: #000;
  background: #fff;
  font-size: 1.1429rem;
  height: 3.5714rem;
  display: flex;
  align-items: center;
  padding: 0 1.4286rem;
  border-bottom: 1px solid #eeeeee;
  justify-content: space-between;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.5rem;
  background: #fff;
  border-top: 1px solid #eeeeee;
}
</style>